<template>
  <div id="app">
       <h3>欢迎光临_vue开发的收银系统水果店</h3>
      <table  class="tb" >
      <tr >
        <th>苹果{{price}}￥/斤，折扣: {{ discount}}折</th>    
      </tr>
      <tr  >
        <td >请输入你要购买的斤数 <input  type = 'number' v-model.number= 'value'></td>
      </tr>
      <tr  >
        <td ><button type='submit' @click = 'submit' >结账买单</button></td>
      </tr>
      <tr  >
        <td >结账单：<span>总价：{{total}}￥元</span> <span>折后价：{{zhehou}}￥元</span><span>省了：{{save}}￥元</span></td>
      </tr>
    </table>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return{
       value:'0',
       price:'10',
       discount: '8',
       total:'0',
       zhehou:'0',
       save:'0'
    }
  },
   methods:{
           submit(){
            this.total = this.price*this.value
            // console.log( this.total);
            this.zhehou =   this.total*0.8
            this.save =  this.total -  this.zhehou
           }         
       }
   }

</script>

<style>
     h3{
      text-align: center;
     }
    #app {
      width: 600px;
      margin: 10px auto;
    }

    .tb {
      border-collapse: collapse;
      width: 100%;
    }

  
    .tb td,
    .tb th {
      padding: 5px;
      border: 1px solid black;
      text-align: center;
    }

   
  </style>

